<template>
    <div class="center_div">
        <div style="margin-top: 5%;margin-bottom: 5%">
            <span style="margin-left: 15px">会议：<el-input v-model="search.meetingname" style="width: 20%;"></el-input></span>
            <el-button icon="" @click="SearchEmploy()" type="primary">搜索</el-button>
        </div>
        <el-table :data="reserveMeeting"  v-loading="tableLoading" element-loading-text="Loading">
            <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
            <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
            <el-table-column prop="employeename" label="发起人" min-width="90"></el-table-column>
            <el-table-column prop="starttime" label="会议开始时间" min-width="120"></el-table-column>
            <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
            <el-table-column prop="reservationtime" label="会议预定时间" min-width="120"></el-table-column>
            <el-table-column prop="description" label="会议描述" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
        <el-button type="success" @click="AfterNotify()">上一页</el-button>
        <el-button type="primary" @click="NextNotify()">下一页</el-button>
        <span> 共 {{this.pagenum}} 页， 当前第 {{this.pages}} 页</span>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                reserveMeeting: [
                    {meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingname: '测试2',roomname: '公共会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingname: '测试3',roomname: '专用会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingname: '测试4',roomname: '公共会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingname: '测试5',roomname: '专用会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingname: '测试6',roomname: '公共会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'}
                ],
                search: {meetingname: ''},
                pages: 1,
                pagenum: 1,
                tableLoading: false
            }
        },
        created() {
            this.fetchMeeting(this.pages)
        },
        methods: {
            async fetchMeeting(page){
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/searchmeetings',{
                    data: {pages: page,meetingname: this.search.meetingname}
                })
                if(code === 200) {
                    console.log(data)
                    this.reserveMeeting = data.meetings
                    this.pages = data.page
                    this.pagenum = data.pagenum

                    this.$formatDateForObjectInArray(this,['reserveMeeting'])
                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            SearchEmploy(){
                console.log(this.search)
                this.fetchMeeting(1)
            },
            NextNotify() {
                if (this.pages !==  this.pageNum) {
                    this.fetchMeeting(++this.pages)
                }
            },
            AfterNotify() {
                if (this.pages !== 1) {
                    this.fetchMeeting(--this.pages)
                }
            }
        }

    }
</script>

<style>
    .center_div{
        width: 60%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>